<template>
  <div class="support-container">
    <el-card class="support-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Service /></el-icon>
          <span>推广返佣及联系客服</span>
        </div>
      </template>
      
      <div class="contact-content">
        <div class="qrcode-section">
          <div class="qrcode-wrapper">
            <img :src="qrcodeImageUrl" alt="客服二维码" class="qrcode-image" />
            <p class="scan-text">扫码添加客服微信</p>
          </div>
          <div class="wechat-info">
            <el-icon><ChatDotRound /></el-icon>
            <span class="label">微信号：</span>
            <span class="wechat-id">{{ customerService.wechatId }}</span>
            <el-button 
              type="primary" 
              size="small" 
              @click="copyWechatId"
              class="copy-btn"
            >
              复制
            </el-button>
          </div>
          
          <!-- 推广系统说明 -->
          <div class="promotion-section">
            <div class="section-title">
              <el-icon><Promotion /></el-icon>
              <span>推广系统</span>
            </div>
            <div class="promotion-content">
              <div class="promotion-link">
                <el-icon><Link /></el-icon>
                <a href="https://tg.shuhailinghang.cn/" target="_blank" class="link-text">https://tg.shuhailinghang.cn/</a>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="copyPromotionLink"
                  class="copy-btn"
                >
                  复制
                </el-button>
              </div>
              <p class="promotion-desc">
                通过您在推广系统分享的筛查系统链接注册，您将获得新用户订单金额的 <span class="highlight">30%</span> 作为奖励。
              </p>
            </div>
          </div>
        </div>

        <div class="description-section">
          <div class="section-title">
            <el-icon><InfoFilled /></el-icon>
            <span>服务说明</span>
          </div>
          <div class="description-content" v-html="formattedDescription"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Service, ChatDotRound, InfoFilled, Link, Promotion } from '@element-plus/icons-vue';
import { getCustomerServiceApi } from '@/api/support'; 

// 初始化数据
const customerService = ref({
  wechatId: '',
  qrcodeUrl: '',
  description: ''
});

// 推广系统链接
const promotionLink = 'https://tg.shuhailinghang.cn/';

// 生成完整的二维码URL
const qrcodeImageUrl = computed(() => {
  if (!customerService.value.qrcodeUrl) return '';
  
  // 如果已经是完整的URL（以http开头），则直接返回
  if (customerService.value.qrcodeUrl.startsWith('http')) {
    return customerService.value.qrcodeUrl;
  }
  
  // 如果是相对路径，确保路径正确
  return customerService.value.qrcodeUrl;
});

const fetchCustomerService = async () => {
  try {
    const response = await getCustomerServiceApi();
    customerService.value = response.data.data;
  } catch (error) {
    ElMessage.error('获取客服信息失败');
  }
};

const formattedDescription = computed(() => {
  return customerService.value.description;
});

const copyWechatId = () => {
  navigator.clipboard.writeText(customerService.value.wechatId)
    .then(() => {
      ElMessage({
        message: '微信号已复制到剪贴板',
        type: 'success'
      });
    })
    .catch(() => {
      ElMessage({
        message: '复制失败，请手动复制',
        type: 'error'
      });
    });
};

const copyPromotionLink = () => {
  navigator.clipboard.writeText(promotionLink)
    .then(() => {
      ElMessage({
        message: '推广链接已复制到剪贴板',
        type: 'success'
      });
    })
    .catch(() => {
      ElMessage({
        message: '复制失败，请手动复制',
        type: 'error'
      });
    });
};

// 组件挂载时获取数据
onMounted(() => {
  fetchCustomerService();
});
</script>

<style lang="scss" scoped>
.support-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;

  .support-card {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    :deep(.el-card__header) {
      padding: 20px 24px;
      border-bottom: 1px solid #e6e8eb;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;

      .header-icon {
        font-size: 24px;
        color: #1a73e8;
      }
    }
  }

  .contact-content {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    padding: 24px;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  .qrcode-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    .qrcode-wrapper {
      text-align: center;

      .qrcode-image {
        width: 280px;
        height: 280px;
        border-radius: 12px;
        padding: 12px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      }

      .scan-text {
        margin-top: 12px;
        color: #64748b;
        font-size: 14px;
      }
    }

    .wechat-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: #f8fafc;
      border-radius: 8px;
      width: 100%;

      .el-icon {
        color: #1a73e8;
        font-size: 20px;
      }

      .label {
        color: #64748b;
        font-size: 14px;
      }

      .wechat-id {
        color: #1f2937;
        font-weight: 500;
        flex: 1;
      }

      .copy-btn {
        padding: 6px 12px;
      }
    }
    
    .promotion-section {
      width: 100%;
      margin-top: 16px;
      background: #f8fff8;
      border-radius: 12px;
      padding: 16px;
      border: 1px dashed #34a853;
      
      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;

        .el-icon {
          color: #34a853;
          font-size: 18px;
        }
      }
      
      .promotion-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        
        .promotion-link {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .el-icon {
            color: #1a73e8;
            font-size: 16px;
          }
          
          .link-text {
            color: #1a73e8;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            flex: 1;
            
            &:hover {
              text-decoration: underline;
            }
          }
          
          .copy-btn {
            padding: 4px 8px;
            font-size: 12px;
          }
        }
        
        .promotion-desc {
          color: #4b5563;
          line-height: 1.6;
          font-size: 14px;
          margin: 8px 0;
          
          .highlight {
            font-weight: 600;
            color: #f59e0b;
          }
        }
      }
    }
  }

  .description-section {
    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;

      .el-icon {
        color: #1a73e8;
      }
    }

    .description-content {
      color: #4b5563;
      line-height: 1.6;

      :deep(h3) {
        color: #1f2937;
        font-size: 16px;
        font-weight: 600;
        margin: 24px 0 12px;

        &:first-child {
          margin-top: 0;
        }
      }

      :deep(p) {
        margin: 8px 0;
      }

      :deep(ul) {
        list-style-type: disc;
        padding-left: 20px;
        margin: 12px 0;

        li {
          margin: 8px 0;
        }
      }
    }
  }
}
</style>